<template>
  <div>
   <div>
    <!-- 1.router-link -->
     <!-- <router-link class="jianje" to="/shouye">首页</router-link>
    <router-link class="jianje" to="/fenglei">分类</router-link>
    <router-link class="jianje" to="/dingdan">订单</router-link>
    <router-link class="jianje" to="/my">我的</router-link> -->
   
   <!-- 2.通过path -->
   <!-- <a href="javascript:;" @click="skipOne('/shouye')">首页</a>
   <a href="javascript:;" @click="skipOne('/fenglei')">分类</a>
   <a href="javascript:;" @click="skipOne('/dingdan')">订单</a>
   <a href="javascript:;" @click="skipOne('/my')">我的</a> -->
   
   
   <!-- 9.通过name -->
   <a href="javascript:;" @click="skipTwo('shouye')">首页</a>
   <a href="javascript:;" @click="skipTwo('fenglei')">分类</a>
   <a href="javascript:;" @click="skipTwo('dingdan')">订单</a>
   <a href="javascript:;" @click="skipTwo('my')">我的</a>
   </div>
   <div>
    <h1>显示切换界面</h1>
   </div>
   <div>
    <router-view></router-view>
   </div>
  </div>
</template>

<script>
export default {
methods: {
  skipOne(path) {
     this.$router.push({
        // path: path,
        path
      })
  },
  skipTwo(name){
    this.$router.push({
        name,
      })
  }
}
}
</script>

<style>
.jianje {
  margin-left: 10px;
}
a {
  margin-left: 10px;
}
</style>